
.ch-nav{
	.tab-nav{
		width: 100%;
		.tab-list{
			width: 140rpx;
			height: 60rpx;
			background: #F2F5FA;
			color: #999999;
			&.active{
				background: #0055FF;
				color: #FFFFFF;
			}
		}
	}
}
.head{
	max-width: $max-width;
	margin: $pc-margin;
	position: fixed;
	width: 100%;
	height: 80rpx;
	background: #FFFFFF;
	.match-info{
		width: 100%;
		line-height: 80rpx;
		.center{
			width: 50rpx;
			text-align: center;
		}
		.left, .right{
			flex: 2;
		}
		.left{
			text-align: right;
		}
		.right{
			text-align: left;
		}
	}
}
.body{
	margin-top: 80rpx;
	.body-head{
		width: 100vw;
		height: 80rpx;
		background: #F2F5FA;
		position: fixed;
		.item{
			width: 120rpx;
			font-size: 24rpx;
			color: #B3B3B3;
			display: flex;
			justify-content: center;
			align-items: center;
			&.w90{
				width: 90rpx;
			}
			&.w150{
				width: 150rpx;
			}
			&.w120{
				width: 120rpx;
			}
			&.w210{
				width: 210rpx;
			}
		}
	}
	.body-detail{
		margin-top: 80rpx;
		.left{
			position: fixed;
			width: 120rpx;
			max-height: calc(100vh - var(--vh-offset, 0px) - #{$navbar-height} - 160rpx);
			overflow-y: auto;
			scrollbar-width: none;
			-webkit-overflow-scrolling: touch;
			.left-list{
				margin-bottom: var(--safe-area-inset-bottom);
				.list-item{
					width: 100%;
					height: 80rpx;
					align-items: center;
					.select-icon{
						width: 4rpx;
						height: 80rpx;
						display: flex;
						align-items: center;
						image{
							width: 4rpx;
							height: 40rpx;
						}
					}
					.name{
						margin-left: 20rpx;
						height: 40rpx;
						line-height: 40rpx;
						text{
							font-size: 24rpx;
						}
						.text-hidden{
							display: inline-block;
							width: 90rpx;
						}
					}
					&.active{
						color: #0055FF;
						background: #FFFFFF;
					}
				}
			}
		}
		.left::-webkit-scrollbar {
			display: none;
		}
		.right{
			margin-left: 120rpx;
			min-height: calc(var(--safe-height) - #{$navbar-height} - 160rpx);
			background: #FFFFFF;
			width: 100%;
			.zs-item{
				height: 80rpx;
				.item{
					width: 120rpx;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					&.w90{
						width: 90rpx;
					}
					&.w150{
						width: 150rpx;
					}
					&.w120{
						width: 120rpx;
					}
					&.w210{
						width: 210rpx;
					}
				}
			}
			.zs-title{
				height: 60rpx;
				background: #D9E5FF;
				display: flex;
				justify-content: center;
				align-items: center;
				text{
					font-size: 22rpx;
					line-height: 22rpx;
				}
			}
		}
	}
}
.foot{
	width: 630rpx;
	position: fixed;
	bottom: calc(40rpx + var(--safe-area-inset-bottom));
	display: flex;
	justify-content: center;
	button{
		width: 160rpx;
		background: #0055FF;
		border-radius: 30rpx;
		font-size: 28rpx;
		line-height: 60rpx;
		font-weight: 600;
		color: #FFFFFF;
		border: none;
	}
}